<template>
	<view class="box">
		<view class="show-price-box">
			<view class="show-item-img-box">
				<image v-if="list.length > 0 && listIndex < list.length" class="show-item-img"
					:src="list[listIndex].image" mode="aspectFill">
				</image>
			</view>

			<view class="show-price-header">
				<text>商品列表</text>
				<image src="../../static/close1.png" @tap="back()"></image>
			</view>
			<view class="sort-type">
				<view @click="initTime" class="flex mr-40 sort" :class="{ active: query.time_order }">
					<view class="mr-10 size-28">时间</view>
					<image src="../../static/sort.png" v-if="query.time_order === ''" />
					<image src="../../static/sort-asc.png" v-if="query.time_order === 1" />
					<image src="../../static/sort-desc.png" v-if="query.time_order === 2" />
				</view>
				<view @click="initPrice" class="flex mr-40 sort" :class="{ active: query.price_order }">
					<view class="mr-10 size-28">价格</view>
					<image src="../../static/sort.png" v-if="query.price_order === ''" />
					<image src="../../static/sort-asc.png" v-if="query.price_order === 1" />
					<image src="../../static/sort-desc.png" v-if="query.price_order === 2" />
				</view>
			</view>
		</view>

		<view class="show-price-body">
			<view class="show-price-item" v-for="(item, index) in list" :key="index" @click="selectItem(index)">
				<view class="left">
					<view>
						<image class="img" :src="item.image"></image>
					</view>
				</view>
				<view class="right">
					<view class="title">
						{{ item.author_name }}
						<text>寄售</text>
					</view>
					<view class="item-id">
						链上标识：<text>{{ item.users_goods_id }}</text>
					</view>
				</view>
				<view class="item-price gold">
					<text>￥{{ item.price }}</text>
				</view>
				<image src="../../static/back-icon.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue";
	import tab from "../../components/tab.vue";
	export default {
		components: {
			empty,
			tab,
		},
		data() {
			return {
				flag: false, //上拉加载
				midIndex: 0,
				query: {
					page: 1,
					pagesize: 10,
					search: "",
					time_order: "",
					price_order: "",
				},
				status: "more",
				list: [],
				array: ["藏品", "盲盒"],

				listIndex: 0,
			};
		},
		onLoad(option) {
			this.midIndex = parseInt(option.midIndex || 0);
			this.query.page = parseInt(option.page || 0);
			this.query.search = option.search || "";
			this.query.time_order = option.time_order || "";
			this.query.price_order = option.price_order || "";

			this.listIndex = option.index || 0;
			this.init();
		},
		onReachBottom() {
			if (!this.flag) {
				this.status = "loading";
				this.query.page++;
				this.init();
			}
		},
		onPullDownRefresh() {
			this.flag = false;
			this.query.page = 1;
			this.list = [];
			this.init();
		},
		methods: {
			selectItem(index) {
				this.listIndex = index;
				uni.setNavigationBarTitle({
					title: `${this.list[index].name}-${this.list[index].author_name}`,
				});
			},
			bindPickerChange(e) {
				this.midIndex = e.detail.value;
				this.list = [];
				this.query = {
					page: 1,
					pagesize: 10,
					search: "",
					time_order: "",
					price_order: "",
				};
				this.init();
			},
			initCut() {},
			// 选择是版权品还是盲盒
			changeMid(index) {
				this.midIndex = index;
				this.list = [];
				this.query = {
					page: 1,
					pagesize: 10,
					search: "",
					time_order: "",
					price_order: "",
				};
				this.init();
			},
			// 时间排序
			initTime() {
				if (this.query.time_order === "") {
					this.query.time_order = 1;
				} else if (this.query.time_order === 1) {
					this.query.time_order = 2;
				} else if (this.query.time_order === 2) {
					this.query.time_order = 1;
				}
				this.query.price_order = "";
				this.list = [];
				this.query.page = 1;
				this.listIndex = 0;
				this.init();
			},
			// 价格排序
			initPrice() {
				if (this.query.price_order === "") {
					this.query.price_order = 1;
				} else if (this.query.price_order === 1) {
					this.query.price_order = 2;
				} else if (this.query.price_order === 2) {
					this.query.price_order = 1;
				}
				this.query.time_order = "";
				this.list = [];
				this.query.page = 1;
				this.listIndex = 0;
				this.init();
			},

			// "number_f": 7344,
			//             "is_show": 1,
			//             "is_del": 0,
			//             "status": 3,
			//             "user_is_del": 0,
			//             "users_goods_id": 46023,
			//             "cancel_time": "2023-03-25 21:08:37"
			//             "sales_time": "2023-03-25 20:58:37"

			init() {
				if (this.midIndex == 0) {
					this.$http("api/trade/tradeGoodsList", this.query).then((res) => {
						uni.stopPullDownRefresh();
						let data = res.data;
						if (data.length == 0) {
							this.flag = true;
							this.status = "noMore";
						} else {
							this.list = this.list.concat(data);
							if (data.length < 10) {
								this.flag = true;
								this.status = "noMore";
							}
							uni.setNavigationBarTitle({
								title: `${this.list[this.listIndex].name}-${
                this.list[this.listIndex].author_name
              }`,
							});
						}
					});
				} else {
					this.$http("api/trade/tradeBoxList", this.query).then((res) => {
						uni.stopPullDownRefresh();
						let data = res.data;
						if (data.length == 0) {
							this.flag = true;
							this.status = "noMore";
						} else {
							this.list = this.list.concat(data);
							if (data.length < 10) {
								this.flag = true;
								this.status = "noMore";
							}
							uni.setNavigationBarTitle({
								title: `${this.list[listIndex].name}-${
                this.list[this.listIndex].author_name
              }`,
							});
						}
					});
				}
			},
			goDetails(item) {
				if (this.midIndex == 0) {
					uni.navigateTo({
						url: "./marketCollect?users_goods_id=" + item.users_goods_id,
					});
				} else {
					uni.navigateTo({
						url: "./marketBox?users_box_id=" + item.users_box_id,
					});
				}
			},
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
		},
	};
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="less" scoped>
	.gold {
		color: #9c8b66;
	}

	.show-price-box {
		position: fixed;
		top: var(--window-top);
		background-color: #ffffff;
		z-index: 100;
		overflow: hidden;

		.show-item-img-box,
		.show-item-img {
			width: 100vw;
			height: 100vw;
		}

		.show-price-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			height: 100rpx;

			text {
				font-size: 40rpx;
				font-weight: bold;
				color: #1a1a1a;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.sort-type {
			// width: calc(100% - 80rpx);
			// margin: 0 40rpx;
			display: flex;
			background-color: #fff;
			padding: 10rpx 20rpx;

			button {
				border: none;
				border-radius: 0;
				line-height: 50rpx;
				height: 50rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				background: none;
				color: #666666;
				font-weight: bold;
			}

			button.active {
				background: #ffffff;
				color: #000000;
			}

			button::after {
				display: none;
			}
		}
	}

	.sort-type {
		display: flex;
		background-color: #fff;
		padding: 10rpx 20rpx;

		button {
			border: none;
			border-radius: 0;
			line-height: 50rpx;
			height: 50rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			background: none;
			color: #666666;
			font-weight: bold;
		}

		button.active {
			background: #ffffff;
			color: #000000;
		}

		button::after {
			display: none;
		}
	}

	.sort {
		display: flex;
		// align-items: center;
		margin-left: 10rpx;
		justify-content: flex-start;

		image {
			width: 16rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}

		&+.sort {
			margin-left: 40rpx;
		}
	}

	.show-price-body {
		width: 100%;
		height: calc(100vh - 400rpx);
		padding: 40rpx 0;
		box-sizing: border-box;
		padding: 0 40rpx;
		background-color: #f5f5f5;

		.show-price-item {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			padding: 20rpx 16rpx;
			margin: 20rpx 0;
			// border-bottom: 1px solid #e3e3e3;
			background-color: #fff;
			border-radius: 10rpx;

			.img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx 0 0 8rpx;
			}

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #1a1a1a;
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				text {
					padding: 5rpx 10rpx;
					font-size: 24rpx;
					border-radius: 5rpx;
					margin-left: 10rpx;
					background-color: rgba(255, 16, 241, 0.1);
					color: rgba(209, 13, 200, 1);
					font-weight: bold;
				}

				.collect-pay-status {
					background-color: rgba(255, 16, 241, 0.1);
					color: rgba(209, 13, 200, 1);
				}
			}

			.item-id {
				font-size: 24rpx;

				text {
					font-weight: bold;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				position: relative;
				top: -40rpx;

				.item-price {
					margin-left: auto;
					margin-right: 10rpx;
					font-size: 32rpx;

					text:first-child {
						font-size: 30rpx;
						font-weight: bold;
						color: #3c3c3c;
					}

					text:last-child {
						font-size: 24rpx;
					}
				}
			}

			.item-price {
				margin-left: auto;
				margin-top: 60px;
				font-size: 34rpx;
				margin-right: -15rpx;
			}

			.right-icon {
				margin-left: auto;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>
